<template>
  <el-container>
    <el-header style="border-style: none;text-align: left;margin-top: 0px;padding-left: 6px" height="45px">
      <!--        <monitor-button></monitor-button>-->
      <el-table ref="title" class="customer-table" :data="titleData" :show-header="false" :height="50" :cell-style="changeCellStyle">
        <el-table-column property="shebei" width="100"></el-table-column>
        <el-table-column property="dianya_t" width="100"></el-table-column>
        <el-table-column class="dianya" property="hanjidianya" width="120"></el-table-column>
        <el-table-column property="dianliu_t" width="100"></el-table-column>
        <el-table-column property="hanjidianliu" width="120"></el-table-column>
        <el-table-column property="songsi_t" width="100"></el-table-column>
        <el-table-column property="songsisudu" width="150"></el-table-column>
        <el-table-column property="resi_t" width="100"></el-table-column>
        <el-table-column property="residianliu" width="120"></el-table-column>
      </el-table>
    </el-header>
    <el-main style="padding-top: 3px;padding-left: 12px;padding-bottom: 15px">
      <monitoring ref="monitoring"></monitoring>
    </el-main>
    <el-footer ref="footer" style="border-style: solid;border-color: #D2B48C;margin-left:12px;margin-right: 4px;margin-top: 0px;padding-left: 2px;padding-right: 2px" height="290px">
      <monitor-table ref="monitortable"></monitor-table>
    </el-footer>
  </el-container>
</template>

<script>
import MonitorButton from './MonitorButton'
import Monitoring from './Monitoring'
import MonitorTable from './MonitorTable'

export default {
  name: 'Hanji',
  components: {MonitorTable, Monitoring, MonitorButton},
  data () {
    return {
      url: '/P2/hanji',
      id: '1',
      hanjiid: '',
      title: [],
      titleData: [{
        shebei: '焊机一',
        dianya_t: '焊机电压',
        hanjidianya: '',
        dianliu_t: '焊机电流',
        hanjidianliu: '120',
        songsi_t: '送丝速度',
        songsisudu: '100',
        resi_t: '热丝电流',
        residianliu: '64986469'
      }],
      itemkey: []
    }
  },
  methods: {
    getParams () {
      const routeParams = this.$route.query
      var id = routeParams.equipId
      switch (id) {
        case '2-1':
          this.hanjiid = '1'
          break
        case '2-2':
          this.hanjiid = '2'
          break
        case '2-3':
          this.hanjiid = '3'
          break
        case '2-4':
          this.hanjiid = '4'
          break
      }
    },

    refreshData (url) {
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'post',
        params: this.$http.adornParams({
          hanjiid: this.hanjiid
        }
        ),
        data:{
         hanjiid: this.hanjiid
        }
      }).then(response => {
          this.$refs.monitoring.welding = response.data
          this.refreshTitle(response.data, this.hanjiid)
          this.$refs.monitoring.paintDianya()
          this.$refs.monitoring.paintDianliu()
          this.$refs.monitoring.paintSongsi()
          this.$refs.monitoring.paintResi()
          this.$refs.monitortable.refreshTable()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    timer () {
      return setInterval(() => {
        this.refreshData(this.url)
        this.$refs.monitortable.t0 = 100
      }, 100)
    },
    refreshTitle (itemkey, hanjiid) {
      switch (hanjiid) {
        case '1':
          this.titleData[0].shebei = '焊机一'
          break
        case '2':
          this.titleData[0].shebei = '焊机二'
          break
        case '3':
          this.titleData[0].shebei = '焊机三'
          break
        case '4':
          this.titleData[0].shebei = '焊机四'
          break
      }
      this.title = itemkey
      this.titleData[0].hanjidianya = this.title[0].hanjidianya
      this.titleData[0].hanjidianliu = this.title[0].hanjidianliu
      this.titleData[0].songsisudu = this.title[0].songsisudu
      this.titleData[0].residianliu = this.title[0].residianliu
    },
    changeCellStyle (row, column, rowIndex, columnIndex) {
      if (row === 0) {
        return 'font-weight:700'
      } else {
        return ''
      }
    }
  },
  created () {
    this.getParams()
    this.timer()
  },
  watch: {
    '$route': function () {
      this.getParams()
    }
  }
}
</script>

<style scoped>
.customer-table >>> .el-table__row>td{
  border: none;
}
.customer-table::before{
  width: 0;
}
.customer-table {
  font-weight: 700;
  font-size: large;
  color: chocolate;
}
.el-menu-container{
  height: 158vh;
  border-right: none;
}
</style>
